//正态分布
<template>
  <el-card class="card">
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div id="Distribution" class="myChart"></div>
  </el-card>
</template>

<style scoped>
  .card {
    padding: 0;
    line-height: 20px;
    text-align: left;
    border-radius: 10px;
  }

  .title {
    text-align: left;
    font-size: 20px;
    color: #676668;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  .myChart {
    width: 100%;
    height: 350px;
  }
</style>

<script>
  export default {
    props: {
      title: String
    },
    data() {
      return {}
    },
    mounted() {
      this.init();
    },
    methods: {
      //正态分布函数
      //mu:平均值，sigma：标准差
      f(x, mu, sigma) {
        return 1 / (Math.sqrt(2 * Math.PI) * sigma) * Math.exp(-(x - mu) * (x - mu) / (2 * sigma * sigma));
      },

      init() {
        let myChart = this.$echarts.init(document.getElementById('Distribution'));
        let colors = ['#5793f3', '#d14a61', '#675bba'];
        let x = [59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72];

        x.sort(function (a, b) {
          return a - b
        });

        console.log(x)
        //x最大值为x[x.length - 1]
        //x最小值为X[0]
        //x的极差为最大-最小
        let xRange = x[x.length - 1] - x[0];

        //区间为极差除值的个数开平方
        let interval = +(((x[x.length - 1] - x[0]) / Math.sqrt(x.length)).toFixed(2));
        //由区间得来的数组
        let intervalArr = intervalFun(x[0], x[x.length - 1], interval);
        let y = countNum(intervalArr, x);
        let yArr = []

        let sum = function (x, y) {
          return x + y;
        };　　//求和函数
        let square = function (x) {
          return x * x;
        };　　//数组中每个元素求它的平方
        let mean = x.reduce(sum) / x.length;
        let deviations = x.map(function (x) {
          return x - mean;
        });
        let stdev = Math.sqrt(deviations.map(square).reduce(sum) / (x.length - 1));
        for (let j = 0; j < intervalArr.length; j++) {
          let res = fun(intervalArr[j], mean, stdev).toFixed(2);
          yArr.push(+res);
        }


        //计算个数
        function countNum(arr1, arr2) {
          let result = [],
            sum = 0;
          for (let i = 0, len1 = arr1.length; i < len1; i++) {
            let num = 0;
            for (let j = 0, len2 = arr2.length; j < len2; j++) {
              if (arr2[j] <= arr1[i]) {
                num++
              }
            }
            result.push(num - sum);
            sum = num
          }
          return result
        }

        //区间得数组
        function intervalFun(min, max, interval) {
          let result = [],
            num = min
          while (num < max) {
            result.push(+(num.toFixed(2)))
            num += interval
          }
          result.push(+(num.toFixed(2)))
          return result
        }

        //计算曲线
        function fun(x, m, s) {
          return 1 / ((Math.sqrt(2 * Math.PI) * s) * Math.exp((((x - m) * (x - m)) / (2 * (s * s)))))
        }

        let barcolors = ['#5793f3', '#d14a61', '#675bba'];


        // console.log(intervalArr);
        myChart.setOption({

          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },

          },
          grid: {
            right: '20%'
          },
          // toolbox: {
          //   feature: {
          //     dataView: {show: true, readOnly: false},
          //     restore: {show: true},
          //     saveAsImage: {show: true}
          //   }
          // },
          legend: {
            data: ['正态分布图', '直方图']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: intervalArr
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '频数',
              position: 'left',
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value}'
              }

            },
            {
              type: 'value',
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '频数',
              type: 'bar',
              data: y
            },
            {
              name: '正态分布',
              smooth: true,
              symbol: "none",
              type: 'line',
              yAxisIndex: 1,
              data: yArr
            }
          ]
        })
      }
    }
  }
</script>
